<script setup lang="ts">
import type { Channel, ChannelResData } from '@/types';
import { ref } from 'vue';
import axios from 'axios'
import { useChannelStore } from '@/stores/channel';

const store = useChannelStore()

// 1. 获取频道数据
const channelList = ref<Channel[]>([])
const getData = async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  channelList.value = res.data.data.channels
}
getData()

</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active: store.channelId === item.id }" href="javascript:;" v-for="item in channelList"
        :key="item.id" @click="store.changeChannelId(item.id)">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>